<template>
    <div class="parkinglotmange">
        <Topsearch></Topsearch>
        <!-- 数据表格 -->
        <div class="datalists">
            <div class="datalistsname">数据列表</div>
            <!-- 添加按钮 -->
            <el-button type="primary" class="append" @click="append"><i class="el-icon-plus"></i>添加车位</el-button>
             <!-- 导入数据 -->
            <el-button type="primary" class="ImportData" @click="ImportData">导入数据</el-button>  
            <!-- 数据表格 -->
            <div class="datatable">
                <el-table
                :data="tableData"
                border
                stripe
                style="width: 100%">
                    <el-table-column
                    type="index"
                    label="序号"
                    width="50">
                    </el-table-column>
                    <el-table-column
                    prop="Belongingcommunity"
                    label="所属小区"
                    width="116">
                    </el-table-column>
                    <el-table-column
                    prop="licenseplate"
                    label="车牌"
                    width="116">
                    </el-table-column>
                    <el-table-column
                    prop="householder"
                    label="户主"
                    width="111">
                    </el-table-column>
                    <el-table-column
                    prop="phonenumber"
                    label="电话"
                    width="116">
                    </el-table-column>
                    <el-table-column
                    prop="ParkingLotName"
                    label="停车场名称"
                    width="116">
                    </el-table-column>
                    <el-table-column
                    prop="Parkingspacenumber"
                    label="车位编号"
                    width="116">
                    </el-table-column>
                     <el-table-column
                    prop="FeeStandards"
                    label="收费标准"
                    width="116">
                    </el-table-column>
                    <el-table-column
                    prop="addtime"
                    label="添加时间"
                    width="156">
                    </el-table-column>
                     <el-table-column
                    prop="note"
                    label="备注"
                    width="77">
                    </el-table-column>
                    <el-table-column
                    prop="operate"
                    label="操作"
                    width="127">
                        <template slot-scope="scope">
                            <i class="el-icon-edit"></i>
                            <span style="margin-left: 5px;margin-right:5px" @click="edit(scope.row.date)">{{ scope.row.edit }}</span>
                            <i class="el-icon-delete"></i>
                            <span style="margin-left: 5px;margin-right:5px" @click="del(scope.row.date)">{{ scope.row.del }}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <Pagecurren></Pagecurren>
            </div>
        </div>
    </div>
</template>

<script>
import Topsearch from '../components/Topsearch.vue'
import Pagecurren from '../components/Pagecurren.vue'
export default {
    components:{
        Topsearch,
        Pagecurren
    },
    data(){
        return{
            tableData:[
                {
                    date: '1',
                    Belongingcommunity: '万达文旅城',
                    licenseplate: '京A·10000',
                    householder:'赵小刚',
                    phonenumber:'13013001300',
                    ParkingLotName:'A区地下停车场',
                    Parkingspacenumber:'A-101',
                    FeeStandards:'普通车型',
                    addtime:'2020-01-02 10：10',
                    note:'',
                    state:'启用',
                    edit:'编辑',
                    del:'删除',
                }, 
                {
                    date: '2',
                    Belongingcommunity: '万达文旅城',
                    licenseplate: '京A·10000',
                    householder:'赵小刚',
                    phonenumber:'13013001300',
                    ParkingLotName:'A区地下停车场',
                    Parkingspacenumber:'A-101',
                    FeeStandards:'普通车型',
                    addtime:'2020-01-02 10：10',
                    note:'',
                    state:'启用',
                    edit:'编辑',
                    del:'删除',
                }, 
                {
                    date: '3',
                    Belongingcommunity: '万达文旅城',
                    licenseplate: '京A·10000',
                    householder:'赵小刚',
                    phonenumber:'13013001300',
                    ParkingLotName:'A区地下停车场',
                    Parkingspacenumber:'A-101',
                    FeeStandards:'普通车型',
                    addtime:'2020-01-02 10：10',
                    note:'',
                    state:'启用',
                    edit:'编辑',
                    del:'删除',
                }, 
                {
                    date: '4',
                    Belongingcommunity: '万达文旅城',
                    licenseplate: '京A·10000',
                    householder:'赵小刚',
                    phonenumber:'13013001300',
                    ParkingLotName:'A区地下停车场',
                    Parkingspacenumber:'A-101',
                    FeeStandards:'普通车型',
                    addtime:'2020-01-02 10：10',
                    note:'',
                    state:'启用',
                    edit:'编辑',
                    del:'删除',
                }, 
                {
                    date: '5',
                    Belongingcommunity: '万达文旅城',
                    licenseplate: '京A·10000',
                    householder:'赵小刚',
                    phonenumber:'13013001300',
                    ParkingLotName:'A区地下停车场',
                    Parkingspacenumber:'A-101',
                    FeeStandards:'普通车型',
                    addtime:'2020-01-02 10：10',
                    note:'',
                    state:'启用',
                    edit:'编辑',
                    del:'删除',
                }, 
            ]
        }
    },
    methods:{
        edit(i){
            console.log('编辑',i)
        },
        del(i){
            console.log('删除',i)
        },
        append(){
            console.log('添加')
        },
        ImportData(){
            console.log('导入')
        }
    }
}
</script>

<style lang="scss" scoped>
    .parkinglotmange{
        width: 1260px;
        margin: auto;
        height: 80vh;
        overflow: scroll;
        scrollbar-width: none;
        // 数据列表
        .datalists{
            width: 1260px;
            height: 1196px;
            padding: 0 20px;
            margin-top: 10px;
            background-color: #fff;
            border: 1px solid rgba(233, 233, 233, 1);
            position: relative;
            box-sizing: border-box;
            // 数据列表名字名称
            .datalistsname{
                margin-top: 40px;
                width: 57px;
                height: 18px;
                line-height: 18px;
                color: #666666;
                font-size: 14px;
            }
            // 添加数据按钮
            .append,.appends,.ImportData{
                min-width: 80px;
                padding: 0 5px;
                height: 35px;
                position: absolute;
                right: 20px;
                top: 23px;
                display: flex;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;
                background-color: #0079fe !important;
                .el-icon-plus,.el-icon-folder-add{
                    font-size: 16px;
                    margin-right: 5px;
                    font-weight: 700;
                }
            }
            .ImportData{
                position: absolute;
                right: 120px;
                top: 23px;
            }
            .append:hover,.appends:hover{
                background-color: #66b1ff !important;
                color: #fff !important;
            }
            .appends{
                position: absolute;
                padding: 0 2px;
                right: 120px;
                top: 23px;
            }
            // 数据表格
            .datatable{
                margin-top: 20px;
                ::v-deep .has-gutter th{
                    height: 45px !important;
                    background-color: #f5f5f5;
                    box-sizing: border-box;
                    padding: 0 !important;
                    font-size: 14px;
                    color: #666666;
                    font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑' !important;
                }
                ::v-deep .el-table__row td{
                    height: 50px !important;
                    padding: 0 !important;
                }
                ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
                    background-color: #f9f9f9;
                }
                ::v-deep .el-table__row .el-table__cell:nth-child(1){
                    color: #0079fe !important;
                }
                ::v-deep .el-table__row .el-table__cell:nth-child(2){
                    color: #666 !important;
                    text-align: center !important;
                }
                ::v-deep .el-table__row .el-table__cell:nth-child(4){
                    color: #999 !important;
                }
                ::v-deep .el-table__row .el-table__cell:nth-last-child(1){
                    text-align: center;
                    color: #0079fe;
                    // cursor: pointer;
                }
                ::v-deep .el-table__row .el-table__cell:nth-last-child(1) span:hover{
                    cursor: pointer;
                    text-decoration: underline !important;
                    // color: #4a4a4a;
                }
                ::v-deep .el-table__row .el-table__cell{
                    color: #666666;
                    font-size: 12px;
                }
                ::v-deep .el-table__row:hover{
                    background-color: inherit !important;
                }
                
            }
        }
    }
</style>